<template>
	<div class="p-grid button-demo">
		<div class="p-col-12 p-md-6">
			<div class="card">
				<h5>默认</h5>
				<Button label="提交" class="p-mr-2 p-mb-2"></Button>
				<Button label="禁用" class="p-mr-2 p-mb-2" :disabled="true"></Button>
			</div>

			<div class="card">
				<h5>严重级别</h5>
				<Button label="主要按钮" class="p-mr-2 p-mb-2"/>
				<Button label="次要按钮" class="p-button-secondary p-mr-2 p-mb-2" />
				<Button label="成功按钮" class="p-button-success p-mr-2 p-mb-2" />
				<Button label="通知按钮" class="p-button-info p-mr-2 p-mb-2" />
				<Button label="警告按钮" class="p-button-warning p-mr-2 p-mb-2" />
				<Button label="危险按钮" class="p-button-danger p-mr-2 p-mb-2" />
			</div>

			<div class="card">
				<h5>文字按钮</h5>
				<Button label="主要按钮" class="p-button-text p-mr-2 p-mb-2" />
				<Button label="次要按钮" class="p-button-secondary p-button-text p-mr-2 p-mb-2" />
				<Button label="成功按钮" class="p-button-success p-button-text p-mr-2 p-mb-2" />
				<Button label="通知按钮" class="p-button-info p-button-text p-mr-2 p-mb-2" />
				<Button label="警告按钮" class="p-button-warning p-button-text p-mr-2 p-mb-2" />
				<Button label="帮助按钮" class="p-button-help p-button-text p-mr-2 p-mb-2" />
				<Button label="危险按钮" class="p-button-danger p-button-text p-mr-2 p-mb-2" />
				<Button label="朴素按钮" class="p-button-plain p-button-text p-mr-2 p-mb-2" />
			</div>

			<div class="card">
				<h5>带边框按钮</h5>
				<Button label="主要按钮" class="p-button-outlined p-mr-2 p-mb-2" />
				<Button label="次要按钮" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2" />
				<Button label="成功按钮" class="p-button-outlined p-button-success p-mr-2 p-mb-2" />
				<Button label="通知按钮" class="p-button-outlined p-button-info p-mr-2 p-mb-2" />
				<Button label="警告按钮" class="p-button-outlined p-button-warning p-mr-2 p-mb-2" />
				<Button label="帮助按钮" class="p-button-outlined p-button-help p-mr-2 p-mb-2" />
				<Button label="危险按钮" class="p-button-outlined p-button-danger p-mr-2 p-mb-2" />
			</div>

			<div class="card">
				<h5>按钮组</h5>
				<span class="p-buttonset">
					<Button label="保存" icon="pi pi-check" />
					<Button label="删除" icon="pi pi-trash" />
					<Button label="取消" icon="pi pi-times" />
				</span>
			</div>

			<div class="card">
				<h5>下拉菜单按钮</h5>
				<SplitButton label="保存" icon="pi pi-check" :model="items" class="p-button-secondary p-mr-2 p-mb-2"></SplitButton>
				<SplitButton label="保存" icon="pi pi-check" :model="items" class="p-button-success p-mr-2 p-mb-2"></SplitButton>
				<SplitButton label="保存" icon="pi pi-check" :model="items" class="p-button-info p-mr-2 p-mb-2"></SplitButton>
				<SplitButton label="保存" icon="pi pi-check" :model="items" class="p-button-warning p-mr-2 p-mb-2"></SplitButton>
				<SplitButton label="保存" icon="pi pi-check" :model="items" class="p-button-danger p-mr-2 p-mb-2"></SplitButton>
			</div>
		</div>

		<div class="p-col-12 p-md-6">
			<div class="card">
				<h5>带图标按钮</h5>
				<Button icon="pi pi-star" class="p-mr-2 p-mb-2"></Button>
				<Button label="书签" icon="pi pi-bookmark" class="p-mr-2 p-mb-2"></Button>
				<Button label="书签" icon="pi pi-bookmark" iconPos="right" class="p-mr-2 p-mb-2"></Button>
			</div>

			<div class="card">
				<h5>凸起按钮</h5>
				<Button label="主要按钮" class="p-button-raised p-mr-2 p-mb-2" />
				<Button label="次要按钮" class="p-button-raised p-button-secondary p-mr-2 p-mb-2" />
				<Button label="成功按钮" class="p-button-raised p-button-success p-mr-2 p-mb-2" />
				<Button label="通知按钮" class="p-button-raised p-button-info p-mr-2 p-mb-2" />
				<Button label="警告按钮" class="p-button-raised p-button-warning p-mr-2 p-mb-2" />
				<Button label="危险按钮" class="p-button-raised p-button-danger p-mr-2 p-mb-2" />
			</div>

			<div class="card">
				<h5>圆角按钮</h5>
				<Button label="主要按钮" class="p-button-rounded p-mr-2 p-mb-2" />
				<Button label="次要按钮" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
				<Button label="成功按钮" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
				<Button label="通知按钮" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
				<Button label="警告按钮" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
				<Button label="危险按钮" class="p-button-rounded p-button-danger p-mr-2 p-mb-2" />
			</div>

			<div class="card">
				<h5>圆形的图标按钮</h5>
				<Button icon="pi pi-star" class="p-button-rounded p-mr-2 p-mb-2" />
				<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
				<Button icon="pi pi-check" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
				<Button icon="pi pi-search" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
				<Button icon="pi pi-user" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
				<Button icon="pi pi-sign-out" class="p-button-rounded p-button-danger p-mr-2 p-mb-2" />
			</div>

			<div class="card">
				<h5>圆形的文本图标按钮</h5>
				<Button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2" />
				<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2" />
				<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2" />
				<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2" />
				<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2" />
				<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2" />
				<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2" />
				<Button icon="pi pi-filter" class="p-button-rounded p-button-plain p-button-text p-mr-2 p-mb-2" />
			</div>

			<div class="card">
				<h5>圆形轮廓图标按钮</h5>
				<Button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2" />
				<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2" />
				<Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2" />
				<Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2" />
				<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2" />
				<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2" />
				<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mr-2 p-mb-2" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				items: [
					{
						label: 'Update',
						icon: 'pi pi-refresh'
					},
					{
						label: 'Delete',
						icon: 'pi pi-times'
					},
					{
						separator:true
					},
					{
						label: 'Home',
						icon: 'pi pi-home'
					},
				]
			}
		}
	}
</script>

<style scoped>

</style>
